﻿
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=10" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta name="Description" content="ChronoZoom is an open-source community project dedicated to visualizing the history of everything." />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    
    <!-- required for windows 8 apps -->
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>  
    
     <script type="text/javascript">
       // Invoke timings.show() to get timings
       var timings = new Object();
       timings.parseStarted = new Date();
       timings.show = function () {
           var msg =
                   "External scripts loading: " + (timings.scriptsLoaded - timings.parseStarted) +
                   " ms\nDocument ready handler: " + (timings.readyStarted - timings.scriptsLoaded) +
                   " ms\n\nRequesting server for timelines data: " + (timings.wcfRequestCompleted - timings.wcfRequestStarted) +
                   " ms\nLayout algorithm: " + (timings.layoutCompleted - timings.wcfRequestCompleted) +
                   " ms\nPopulating virtual canvas: " + (timings.canvasInited - timings.layoutCompleted) + " ms";
           alert(msg);
       }

       var _gaq = _gaq || [];
       _gaq.push(['_setAccount', 'UA-29180487-2']);
       _gaq.push(['_setDomainName', 'chronozoomproject.org']);
       _gaq.push(['_setAllowLinker', true]);
       _gaq.push(['_trackPageview']);
       (function () {
           var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
           ga.src = '/Scripts/ga.js';
           var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
       })();
</script>

    <link rel="stylesheet" type="text/css" href="Styles/cz.css" />
    <link rel="stylesheet" type="text/css" href="Styles/axis.css" />
    <script type="text/javascript" src="Scripts/jquery-1.8.2-win8-1.0.js"></script>
    <script type="text/javascript" src="Scripts/seadragon-dev.js"></script>
    <script type="text/javascript" src="Scripts/jquery-ui-1.8.16.custom.min.js"></script>
	<script type="text/javascript" src="Scripts/rx.js"></script>
    <script type="text/javascript" src="Scripts/rx.jQuery.js"></script>
    <script type="text/javascript" src="Scripts/cz.settings.js"></script>
    <script type="text/javascript" src="Scripts/common.js"></script>
    <script type="text/javascript" src="Scripts/viewport.js"></script>
    <script type="text/javascript" src="Scripts/viewportAnimation.js"></script>
    <script type="text/javascript" src="Scripts/mouseWheelPlugin.js"></script>
    <script type="text/javascript" src="Scripts/gestures.js"></script>
    <script type="text/javascript" src="Scripts/virtualCanvas.js"></script>
    <script type="text/javascript" src="Scripts/vccontent.js"></script>
    <script type="text/javascript" src="Scripts/viewportController.js"></script>
    <script type="text/javascript" src="Scripts/axis.js"></script>
    <script type="text/javascript" src="Scripts/urlnav.js"></script>
    <script type="text/javascript" src="Scripts/layout.js"></script>
    <script type="text/javascript" src="Scripts/tours.js"></script>
    <script type="text/javascript" src="Scripts/search.js"></script>
    <script type="text/javascript" src="Scripts/bibliography.js"></script>
    <script type="text/javascript" src="Scripts/breadCrumbs.js"></script>
    <script src="Scripts/FacebookWinJS.js"></script>
     <!--[if IE]>
    <script type="text/javascript" src="Scripts/regimesIE.js"></script>
    <![endif]-->
    <script type="text/javascript">
        
        timings.scriptsLoaded = new Date();
        var searchString;
        var ax, vc;
        var visReg;
        var cosmosVisible, earthVisible, lifeVisible, prehistoryVisible, humanityVisible, facebookVisible = "@/t4242";
        var content;
        var breadCrumbs; //titles and visibles of the recent breadcrumbs
        var firstTimeWelcomeChecked = true; // if welcome screen checkbox checked or not

        var regimes = new Array();
        var regimeNavigator;

        var k = 1000000000;
        var setNavigationStringTo; // { element or bookmark, id } identifies that we zoom into this element and when (if) finish the zoom, we should put the element's path into navigation string

        var regimesRatio;

        var hashHandle = true; // Handle hash change event

        var collapseHeight = 160;
        var isCollapsed = true;



        function updateAxis(vc, ax) {
            var vp = vc.virtualCanvas("getViewport");
            var lt = vp.pointScreenToVirtual(0, 0);
            var rb = vp.pointScreenToVirtual(vp.width, vp.height);
            ax.axis("setRange", lt.x, rb.x);
        }

        function updateNavigator(vp) {
            var navigatorFunc = function (coordinate) {
                if (Math.abs(coordinate) < 0.00000000001)
                    return 0;
                //Get log10 from coordinate
                var log = Math.log(coordinate) / 2.302585092994046;
                //Get pow from log10
                var pow = Math.pow(log, 3) * Math.exp(-log * 0.001);
                //Get final width of the column
                return (log + pow) * 13700000000 / 1041.2113538234402;
            }

            var left = vp.pointScreenToVirtual(0, 0).x;
            if (left < maxPermitedTimeRange.left) left = maxPermitedTimeRange.left;
            var right = vp.pointScreenToVirtual(vp.width, vp.height).x;
            if (right > maxPermitedTimeRange.right) right = maxPermitedTimeRange.right;
            var newRight = navigatorFunc(Math.abs(right));
            var newLeft = navigatorFunc(Math.abs(left));
            var newWidth = Math.max(2.0 / regimesRatio, Math.abs(newRight - newLeft));

            var min = 0;
            var max = document.getElementById("cosmos_rect").clientWidth;

            var l = 301 - regimesRatio * newLeft;
            var w = regimesRatio * newWidth;

            if (l < 0 || l + w > max + 5)
                return;

            regimeNavigator.css('left', l);
            regimeNavigator.css('width', w);
        }

        var controller; //a controller to perform smooth navigation
        var isAxisFreezed = true; //indicates whether the axis moves together with canvas during navigation or not
        var startHash;


        function getCookie(c_name) {
            var appData = Windows.Storage.ApplicationData.current.roamingSettings;
            if (appData.values.size > 0) {
                var i, x, y, ARRcookies = appData.values["pseudoCookie"].split(";");

                for (i = 0; i < ARRcookies.length; i++) {
                    x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));
                    y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
                    x = x.replace(/^\s+|\s+$/g, "");
                    if (x == c_name) {
                        return unescape(y);
                    }
                }
            }
            return null;
        }

        
            function application () {
            $.isUnsafe = true;
            $(".collapsable").hide();
            $('.bubbleInfo').hide();
            ("#axis").showThresholds = true;

            if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) {
                if (/Chrome[\/\s](\d+\.\d+)/.test(navigator.userAgent)) {
                    var oprversion = new Number(RegExp.$1) // capture x.x portion and store as a number
                    if (oprversion < 14.0) {
                        var fallback_agreement = getCookie("new_bad_browser_agreement");
                        if ((fallback_agreement == null) || (fallback_agreement == "")) {
                            window.location = "testFallBackPage.htm";
                            return;
                        }
                    }
                }
            }
            else if (navigator.userAgent.toLowerCase().indexOf('version') > -1) {
                if (/Version[\/\s](\d+\.\d+)/.test(navigator.userAgent)) {
                    var oprversion = new Number(RegExp.$1) // capture x.x portion and store as a number
                    if (oprversion < 5.0) {
                        var fallback_agreement = getCookie("new_bad_browser_agreement");
                        if ((fallback_agreement == null) || (fallback_agreement == "")) {
                            window.location = "testFallBackPage.htm";
                            return;
                        }
                    }
                }
            }
            else {
                var br = $.browser;
                var isIe9 = br.msie && parseInt(br.version, 10) >= 9;
                if (!isIe9) {
                    var isFF9 = br.mozilla && parseInt(br.version, 10) >= 7;
                    if (!isFF9) {
                        var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
                        if (!is_chrome) {
                            var fallback_agreement = getCookie("new_bad_browser_agreement");
                            if ((fallback_agreement == null) || (fallback_agreement == "")) {
                                window.location = "testFallBackPage.htm";
                                return;
                            }
                        }
                        return;
                    }
                }
            }

            if (navigator.userAgent.match(/(iPhone|iPod|iPad)/)) {
                // Suppress the default iOS elastic pan/zoom actions.
                document.addEventListener('touchmove', function (e) { e.preventDefault(); });
            }

            if (navigator.userAgent.indexOf('Mac') != -1) {
                // Disable Mac OS Scrolling Bounce Effect
                var body = document.getElementsByTagName('body')[0];
                body.style.overflow = "hidden";
            }

            // init seadragon. set path to image resources for nav buttons 
            Seadragon.Config.imagePath = seadragonImagePath;

            maxPermitedVerticalRange = { top: 0, bottom: 10000000 }; //temporary value until there is no data
            timings.readyStarted = new Date();

            ax = $("#axis");
            ax.axis();

            vc = $("#vc");
            vc.virtualCanvas();

            regimeNavigator = $('#regime_navigator');
            regimeRects = $('.regimes_rects');
            regimeRects.bind("MSPointerDown", function (e) {
                    passThrough(e);
            });

            regimesRatio = 300 / Math.abs(maxPermitedTimeRange.left - maxPermitedTimeRange.right);

            if (window.location.hash)
                startHash = window.location.hash; // to be processes after the data is loaded
            loadData(); //retrieving the data

            initializeSearch();
            initializeBibliography();
            initializeToursUI();

            var canvasGestures = getGesturesStream(vc); //gesture sequence of the virtual canvas
            var axisGestures = applyAxisBehavior(getGesturesStream(ax)); //gesture sequence of axis (tranformed according to axis behavior logic)
            var jointGesturesStream = canvasGestures.Merge(axisGestures);

            controller = new ViewportController(
                            function (visible) {
                                var vp = vc.virtualCanvas("getViewport");
                                var markerPos = ax.axis("MarkerPosition");
                                var oldMarkerPosInScreen = vp.pointVirtualToScreen(markerPos, 0).x;

                                vc.virtualCanvas("setVisible", visible, controller.activeAnimation);
                                updateAxis(vc, ax);
                                vp = vc.virtualCanvas("getViewport");
                                if (pauseTourAtAnyAnimation) { //watch for the user animation during playing of some tour bookmark
                                    tourPause();
                                    pauseTourAtAnyAnimation = false;
                                }

                                var hoveredInfodot = vc.virtualCanvas("getHoveredInfodot");
                                var actAni = controller.activeAnimation != undefined;

                                if (actAni && !hoveredInfodot.id) {
                                    var newMarkerPos = vp.pointScreenToVirtual(oldMarkerPosInScreen, 0).x;
                                    ax.axis("setTimeMarker", newMarkerPos);
                                }

                                updateNavigator(vp);
                            },
                            function () {
                                return vc.virtualCanvas("getViewport");
                            },
                            jointGesturesStream);

            var hashChangeFromOutside = true; // True if url is changed externally

            // URL Nav: update URL when animation is complete
            controller.onAnimationComplete.push(function (id) {
                hashChangeFromOutside = false;
                if (setNavigationStringTo && setNavigationStringTo.bookmark) { // go to search result
                    navigationAnchor = navStringTovcElement(setNavigationStringTo.bookmark, vc.virtualCanvas("getLayerContent"));
                    window.location.hash = setNavigationStringTo.bookmark;
                }
                else {
                    if (setNavigationStringTo && setNavigationStringTo.id == id)
                        navigationAnchor = setNavigationStringTo.element;

                    var vp = vc.virtualCanvas("getViewport");
                    window.location.hash = vcelementToNavString(navigationAnchor, vp);
                }
                setNavigationStringTo = null;
            });

            // URL Nav: handle URL changes from outside
            window.addEventListener("hashchange", function () {
                if (window.location.hash && hashChangeFromOutside && hashHandle) {
                    var hash = window.location.hash;
                    var visReg = navStringToVisible(window.location.hash.substring(1), vc);
                    if (visReg) {
                        isAxisFreezed = true;
                        controller.moveToVisible(visReg, true);
                        // to make sure that the hash is correct (it can be incorrectly changed in onCurrentlyObservedInfodotChanged)
                        if (window.location.hash != hash) {
                            hashChangeFromOutside = false;
                            window.location.hash = hash;
                        }
                    }
                    hashHandle = true;
                } else
                    hashChangeFromOutside = true;
            });


            // Axis: enable showing thresholds
            controller.onAnimationComplete.push(function () {
                ax.axis("enableThresholds", true);
                //if (window.console && console.log("thresholds enabled"));
            });
            //Axis: disable showing thresholds
            controller.onAnimationStarted.push(function () {
                ax.axis("enableThresholds", true);
                //if (window.console && console.log("thresholds disabled"));
            });
            // Axis: enable showing thresholds
            controller.onAnimationUpdated.push(function (oldId, newId) {
                if (oldId != undefined && newId == undefined) { // animation interrupted
                    setTimeout(function () {
                        ax.axis("enableThresholds", true);
                        //if (window.console && console.log("thresholds enabled"));
                    }, 500);
                }
            });

            //Tour: notifyng tour that the bookmark is reached
            controller.onAnimationComplete.push(
                                function (id) {
                                    if (tourBookmarkTransitionCompleted != undefined)
                                        tourBookmarkTransitionCompleted(id);
                                    if (tour != undefined && tour.state != "finished") //enabling wathcing for user activity while playing the bookmark
                                        pauseTourAtAnyAnimation = true;
                                });
            //Tour: notifyng tour that the transition was interrupted
            controller.onAnimationUpdated.push(
                                function (oldId, newId) {
                                    if (tour != undefined) {
                                        if (tourBookmarkTransitionInterrupted != undefined) { //in transition
                                            var prevState = tour.state;
                                            tourBookmarkTransitionInterrupted(oldId);
                                            var alteredState = tour.state;

                                            if (prevState == "play" && alteredState == "pause") //interruption caused toue pausing. stop any animations, updating UI as well
                                                tourPause();

                                            setNavigationStringTo = null;
                                        }
                                    }
                                }
            );

            updateLayout();

            vc.bind("elementclick", function (e) {
                navigateToElement(e);
            });

            vc.bind('cursorPositionChanged', function (cursorPositionChangedEvent) {
                updateMarker();
            });

            ax.bind('thresholdBookmarkChanged', function (thresholdBookmark) {
                var bookmark = navStringToVisible(thresholdBookmark.Bookmark, vc);
                if (bookmark != undefined) {
                    controller.moveToVisible(bookmark, false);
                }
            });

            // Reacting on the event when one of the infodot exploration causes inner zoom constraint
            vc.bind("innerZoomConstraintChenged", function (constraint) {
                controller.effectiveExplorationZoomConstraint = constraint.zoomValue; // applying the constraint
                ax.axis("allowMarkerMovesOnHover", !constraint.zoomValue);
            });

            vc.bind("breadCrumbsChanged", function (breadCrumbsEvent) { //reacting on the event when the first timeline that contains whole visible region is changed
                updateBreadCrumbsLabels(breadCrumbsEvent.breadCrumbs);
            });

            timings.readyFinished = new Date();
            var vp = vc.virtualCanvas("getViewport");
            vc.virtualCanvas("setVisible", getVisibleForElement({ x: -13700000000, y: 0, width: 13700000000, height: 5535444444.444445 }, 1.0, vp));
            updateAxis(vc, ax);

            var bid = window.location.hash.match("b=([a-z0-9_]+)");
            if (bid) {
                //bid[0] - source string
                //bid[1] - found match
                $("#bibliography .sources").empty();
                $("#bibliography .title").html("<span>Loading...</span>");
                $("#bibliographyBack").css("display", "block");
            }

        }

        function updateMarker() {
            ax.axis("setTimeMarker", vc.virtualCanvas("getCursorPosition"));
        }

        var tourNotParsed = undefined; // indicates that URL was checked at tour sharing after page load

        //loading the data from the service
        function loadData() {
            timings.wcfRequestStarted = new Date();
            var url;
            czDataSource = "facebook";
            switch (czDataSource) {
                case 'db': url = "http://www.chronozoomproject.org/Chronozoom.svc/get";
                    break;
                case 'relay': url = "http://www.chronozoomproject.org/ChronozoomRelay";
                    break;
                case 'dump': url = "http://www.chronozoomproject.org/ResponseDump.txt";
                    break;
                case 'facebook': url = "https://graph.facebook.com/me/?access_token=" + accessToken;
                    break;
            }

            $.ajax({ //main content fetching
                cache: true,
                type: "GET",
                async: true,
                dataType: "json",
                url: url,
                success: function (result) {

                    content = result;
                    if (czDataSource == 'facebook') {
                        // parses facebook content
                        var translatedContent = new Object();
                        var bday = content.birthday.split("/", 3);


                        // translate content
                        translatedContent.Id = "468925a7-81ca-4c35-a511-51f67d7d0be9";
                        translatedContent.FromTimeUnit = "ce";
                        translatedContent.FromMonth =  parseInt(bday[0]).toString();
                        translatedContent.FromDay = parseInt(bday[1]).toString();
                        translatedContent.FromYear =  parseInt(bday[2]).toString();
                        translatedContent.Height = null;
                        translatedContent.Sequence = null;
                        translatedContent.ChildTimelines = [];
                        translatedContent.Regime = "Humanity";
                        translatedContent.Threshold = "8. Origins of modern world";
                        translatedContent.BookmarkRelativePath = facebookVisible.substr(2);
                        translatedContent.__type = "Timeline:#Chronozoom.Entities";
                        translatedContent.Title = content.name;
                        translatedContent.ToDay = 4;
                        translatedContent.ToMonth = 24;
                        translatedContent.ToTimeUnit = "ce";
                        translatedContent.Exhibits = [];
                        translatedContent.ToYear = 2013;
                        translatedContent.UniqueID = 4242;
                        result.d = new Array();
                        result.d[0] = translatedContent;
                    }

                    content = result;
                    ProcessContent(result);

                    if (typeof tours !== 'undefined') { // tours are loaded, check at shared tour
                        loadTourFromURL();
                        tourNotParsed = false;
                    }
                    else // tours are not loaded yet, checking at shared tour will be after successful load of tours 
                        tourNotParsed = true;
                },
                error: function (xhr) {
                    timings.RequestCompleted = new Date();
                    //alert("Error connecting to service: " + xhr.responseText);
                    var md = new Windows.UI.Popups.MessageDialog("Error connecting to service: " + xhr.responseText);
                    md.showAsync();
                }
            });

            var toursUrl;
            switch (czDataSource) {
                case 'db': toursUrl = "http://www.chronozoomproject.org/Chronozoom.svc/getTours";
                    break;
                case 'relay': toursUrl = "ChronozoomRelay";
                    break;
                case 'dump': toursUrl = "toursDump.txt";
                    break;
                case 'facebook':
                    return;
            }

            $.ajax({ //tours fetching
                cache: true,
                type: "GET",
                async: true,
                dataType: "json",
                url: toursUrl,
                success: function (result) {
                    parseTours(result);
                    initializeToursContent();

                    // check at shared tour
                    if (tourNotParsed == true) {
                        loadTourFromURL();
                        tourNotParsed = false;
                    }
                },
                error: function (xhr) {
                    $("tours_index").attr("onmouseup", function () {
                        alert("The tours failed to download. Please refresh the page later and try to activate tours again.");
                    });
                    initializeToursContent();
                }
            });
        }

        function ProcessContent(content) {
            timings.wcfRequestCompleted = new Date();
            Load(vc, content.d);
            timings.layoutCompleted = new Date();
            if (startHash) { // restoring the window's hash as it was on the page loading
                visReg = navStringToVisible(startHash.substring(1), vc);
            }

            InitializeRegimes();
            if (!visReg && cosmosVisible) {
                window.location.hash = humanityVisible != null ? humanityVisible : cosmosVisible;
                visReg = navStringToVisible(humanityVisible != null ? humanityVisible : cosmosVisible, vc);
            }
            else if (!visReg && facebookVisible) {
                window.location.hash = facebookVisible;
                visReg = navStringToVisible(facebookVisible, vc);
            }
            if (visReg) {
                vc.virtualCanvas("setVisible", visReg);
                updateAxis(vc, ax);
                var vp = vc.virtualCanvas("getViewport");
                updateNavigator(vp);

                if (startHash && window.location.hash !== startHash) {
                    hashChangeFromOutside = false;
                    window.location.hash = startHash; // synchronizing
                }
            }
            timings.canvasInited = new Date();
        }

        function InitializeRegimes() {
            if (content) {
                if (content.d.length > 0) {
                    var f = function (timeline) {
                        if (!timeline) return null;
                        var v = vc.virtualCanvas("findElement", 't' + timeline.UniqueID);
                        regimes.push(v);
                        if (v) v = vcelementToNavString(v);
                        return v;
                    }

                    var cosmosTimeline = content.d[0];
                    cosmosVisible = f(cosmosTimeline);
                    navigationAnchor = vc.virtualCanvas("findElement", 't' + cosmosTimeline.UniqueID);

                    var earthTimeline = FindChildTimeline(cosmosTimeline, earthTimelineID);
                    earthVisible = f(earthTimeline);
                    var lifeTimeline = FindChildTimeline(earthTimeline, lifeTimelineID);
                    lifeVisible = f(lifeTimeline);
                    var prehistoryTimeline = FindChildTimeline(lifeTimeline, prehistoryTimelineID);
                    prehistoryVisible = f(prehistoryTimeline);
                    var humanityTimeline = FindChildTimeline(prehistoryTimeline, humanityTimelineID, true);
                    humanityVisible = f(humanityTimeline);

                    maxPermitedVerticalRange = {    //setting top and bottom observation constraints according to cosmos timeline
                        top: cosmosTimeline.y,
                        bottom: cosmosTimeline.y + cosmosTimeline.height
                    };

                    maxPermitedScale = navStringToVisible(cosmosVisible, vc).scale * 1.1;
                    setVisibleByUserDirectly(humanityTimelineID);
                }
            }
        }

        $(window).bind('resize', function () {
            updateLayout();
        });

        function updateLayout() {
            document.getElementById("vc").style.height = (window.innerHeight - collapseHeight) + "px";

            $(".breadCrumbPanel").css("width", Math.round(($("#vc").width() / 2 - 50)));
            $("#bc_navRight").css("left", ($(".breadCrumbPanel").width() + $(".breadCrumbPanel").position().left + 2) + "px");
            visibleAreaWidth = $(".breadCrumbPanel").width();
            updateHiddenBreadCrumbs();

            var height = window.innerHeight;
            var offset = height - collapseHeight;
            // todo: use axis' height instead of constants
            document.getElementById("bibliographyBack").style.height = window.innerHeight + "px";
            document.getElementById("bibliographyOut").style.top = (150) + "px";
            document.getElementById("bibliographyOut").style.height = offset + "px";
            document.getElementById("bibliographyOut").style.top = (150) + "px";
            document.getElementById("bibliography").style.height = (offset - 50) + "px";
            document.getElementById("bibliography").style.top = (25) + "px";

            document.getElementById("welcomeScreenBack").style.height = window.innerHeight + "px";
            // todo: use (welcomeScreen' content + axis height + footer height) instead of consants
            if (height <= 669) {
                document.getElementById("welcomeScreenOut").style.top = (150) + "px";
                document.getElementById("welcomeScreenOut").style.height = offset + "px";
                document.getElementById("welcomeScreenOut").style.top = (150) + "px";
                document.getElementById("welcomeScreen").style.height = (offset - 50) + "px";
            }
            else { // keeping height of welcome screen constant, positioning in center of canvas
                var diff = Math.floor((height - 669) / 2);
                document.getElementById("welcomeScreenOut").style.top = (150 + diff) + "px";
                document.getElementById("welcomeScreenOut").style.height = (482) + "px";
                document.getElementById("welcomeScreenOut").style.top = (150 + diff) + "px";
                document.getElementById("welcomeScreen").style.height = (432) + "px";
            }
            document.getElementById("welcomeScreen").style.top = (25) + "px";

            InitializeRegimes();
            vc.virtualCanvas("updateViewport");
            ax.axis("updateWidth");
            updateAxis(vc, ax);
            updateBreadCrumbsLabels();
            
        }

        /*
    	Is called by direct user actions like links, bread crumbs clicking, etc.
    	*/
        function setVisibleByUserDirectly(visible) {
            pauseTourAtAnyAnimation = false;
            if (tour != undefined && tour.state == "play")
                tourPause();
            return setVisible(visible);
        }

        function setVisible(visible) {
            if (visible) {
                //ax.axis("enableThresholds", false);
                return controller.moveToVisible(visible);
            }
        }

        function passThrough(e) {
            var mouseX = e.originalEvent.clientX; // offset().left;
            var mouseY = e.originalEvent.clientY;

            var cosmos_rect = $("#cosmos_rect");
            var offset_space = cosmos_rect.offset();
            var width_space = cosmos_rect.width();
            var height_space = cosmos_rect.height();
            if (mouseX > offset_space.left && mouseX < offset_space.left + width_space
             && mouseY > offset_space.top && mouseY < offset_space.top + height_space)
                navigateToBookmark(cosmosVisible);

            var earth_rect = $("#earth_rect");
            var offset_earth = earth_rect.offset();
            var width_earth = earth_rect.width();;
            var height_earth = earth_rect.height();
            if (mouseX > offset_earth.left && mouseX < offset_earth.left + width_earth
             && mouseY > offset_earth.top && mouseY < offset_earth.top + height_earth)
                navigateToBookmark(earthVisible);

            var life_rect = $("#life_rect");
            var offset_life = life_rect.offset();
            var width_life = life_rect.width();
            var height_life = life_rect.height();
            if (mouseX > offset_life.left && mouseX < offset_life.left + width_life
             && mouseY > offset_life.top && mouseY < offset_life.top + height_life)
                navigateToBookmark(lifeVisible);

            var prehuman_rect = $("#prehuman_rect");
            var offset_prehuman = prehuman_rect.offset();
            var width_prehuman = prehuman_rect.width();;
            var height_prehuman = prehuman_rect.height();;
            if (mouseX > offset_prehuman.left && mouseX < offset_prehuman.left + width_prehuman
             && mouseY > offset_prehuman.top && mouseY < offset_prehuman.top + height_prehuman)
                navigateToBookmark(prehistoryVisible);

            var human_rect = $("#human_rect");
            var offset_human = human_rect.offset();
            var width_human = human_rect.width();;
            var height_human = human_rect.height();;
            if (mouseX > offset_human.left && mouseX < offset_human.left + width_human
             && mouseY > offset_human.top && mouseY < offset_human.top + height_human)
                navigateToBookmark(humanityVisible);
        }

        /*function activateWelcomeBox() {
    		$.cookie("welcomeScreenActive", "1");
    	}

		function checkboxWelcomeChanged() {
			if ($('input[name=welcomeScreenCheckbox]').is(':checked'))
				activateWelcomeBox();
			else {
				$.cookie("welcomeScreenActive", null);
			}
    	}*/

        function closeWelcomeScreen() {
            if ($('input[name=welcomeScreenCheckbox]').is(':checked'))
                setCookie("welcomeScreenDisallowed", "1", 11365);

            hideWelcomeScreen();
        }

        function hideWelcomeScreen() {
            document.getElementById("welcomeVideo").src = "";
            $("#welcomeScreenBack").css("display", "none");
        }

        function setCookie(c_name, value, exdays) {
            var exdate = new Date();
            exdate.setDate(exdate.getDate() + exdays);
            var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString());
            var appData = Windows.Storage.ApplicationData.current.roamingSettings;
            appData.values["pseudoCookie"] = c_name + "=" + c_value;
        }

        //$(function () {
        //    collapseHeight = 170;
        //    isCollapsed = true;
        //    $(".collapsable").accordion({
        //        collapsible: true,
        //        active: false

        //    });

        //});

        function resizeHeader() {
            if (isCollapsed) {
                $(".collapsable").show();
                isCollapsed = false;
            }
            else {
                $(".collapsable").hide();
                isCollapsed = true;
            }
        }
        var accessToken;
        $(function () {
            
            var login = new FacebookWinJS.Login(document.querySelector(".loginButton"), { 'appId': 169968023162356 });
           /* if (login.isUserAuthenticated()) {
                accessToken = login.accessToken;
                application();
                
            }*/
            login.addEventListener("login", function (params) {
                accessToken = login.accessToken;
                application();
            });
        });

	</script>
    <title>ChronoZoom</title>
</head>
<body style="background-color: Black; min-width: 950px;" >
	
    <div id="fb-root"></div>
    <div id="vc" style="width: 100%; height: auto; overflow: hidden; background-image: url('Images/background.jpg');
        background-repeat: no-repeat; background-attachment: fixed; background-position: center center;
        background-size: cover">
        <div id="layerTimelines" onselectstart="return false;">
        </div>
               <!--for popup's-->
		  <p class="bubbleInfo" style="display:inline-block; z-index:3000;" id="defaultBox">
			<span></span>
		  </p>
        <!--//////////-->
        <div id="layerInfodots" onselectstart="return false;">
        </div>
        <div id="iframe_layer" onselectstart="return false;">
        </div>
    </div>
     <div id="axis" style="width: 100%; height: 47px; overflow: hidden" onselectstart="return false;">
    </div>
    <div id="search" class="czWindow" style="z-index: 2010;max-height:250px; display: none">
        <div class="header" onselectstart="return false;">
            Search</div>
        <div>
            <input id="searchTextBox" class="czTextBox emptyTextBox" style="margin: 10px 10px 10px 10px;
                width: 190px" value="type here..." />
        </div>
        <div class="searchResults" style="height:auto;max-height:140px">
        </div>
        <div>
            <!--<img src="Images/loading10.gif" style="width: 190px;margin-left: 10px; height: 20px;display:none;" alt="Searching..." id="loadingImage"/>-->
            <img src="Images/loading.gif" style="width: 190px;margin-left: 10px; margin-bottom:10px;height: 20px;display:none;" alt="Searching..." id="loadingImage"/>
        </div>
    </div>
    <div id="tours" class="czWindow" onselectstart="return false;" style="display: none">
        <div class="header">
            Tours</div>
        <div id="tours-narration" class="narration" onclick="onNarrationClick();">
            Narration: <span id="tours-narration-on" class="narration-selected">ON</span> |
            <span id="tours-narration-off">OFF</span>
        </div>
        <div id="tours-content" class="content">
        </div>
    </div>
    <div id="bookmarks" class="bookmarksWindow" onselectstart="return false;" style="display: none">
        <img id="bookmarksCollapse" src="Images/collapse-left.png" class="headerButton" onclick="onBookmarksCollapse();" />
        <div class="header">
        </div>
        <div class="slideHeader">
        </div>
        <div class="slideText">
        </div>
        <div class="slideFooter">
        </div>
    </div>
    <div id="bibliographyBack" class="biblBack" style="display: none">
        <div id="bibliographyOut" class="biblOuterWindow">
            <div id="bibliography" class="biblWindow">
                <img class="closeButton" id="biblCloseButton" src="Images/close_off.png" onmouseover="toggleOnImage('biblCloseButton', 'png');"
                    onmouseout="toggleOffImage('biblCloseButton', 'png');" alt="Close" onselectstart="return false;" />
                <div class="title" onselectstart="return false;">
                    <span>Infodot name</span> &gt; Bibliography
                </div>
                <div class="sources">
                </div>
            </div>
        </div>
    </div>
    


    <div id="welcomeScreenBack" class="welcomeScreenBack">
        <div id="welcomeScreenOut" class="welcomeScreenOuterWindow">
            <div id="welcomeScreen" class="welcomeScreen">
                <div class="titleArea">
                <img class="closeButton" id="welcomeScreenCloseButton" src="Images/wlcmScreen_close_off.png" onmouseover="toggleOnImage('welcomeScreenCloseButton', 'png');"
                    onmouseout="toggleOffImage('welcomeScreenCloseButton', 'png');" alt="Close" onselectstart="return false;" 
    	            onclick="closeWelcomeScreen();"/>
                <div class="title" onselectstart="return false;">
                    <span>Welcome to ChronoZoom beta!</span>
                </div>
                </div>
                <div class="content">
                    <div class="description">
                        ChronoZoom is an interactive timeline for all of history.
                        <p>Explore all of the past - from the Big Bang, to the dinosours, to ancient and modern history.</p>
                        Click or scroll to navigate through events and timelines. Watch our introduction video for a quick overview of this project.

                        <div style="position: absolute; bottom: 0px;">
                            <button class="button" onclick="closeWelcomeScreen()">Start Exploring!</button>
                            <div>
                                <input type="checkbox" id="welcomeScreenCheckbox" name="welcomeScreenCheckbox"/> 
							    <label for="welcomeScreenCheckbox" unselectable="on" style="font-family: Arial; font-size: 16px;">Don't Show Again</label>
                            </div> 
                        </div>
                    </div>
                    <div class="media" id="welcomeScreenMedia">
                        <iframe class="player" id="welcomeVideo" src="http://www.youtube.com/embed/3jvJD8Qv5ec" frameborder="0"></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="header" style="height: 120px;" >
        <div style="position: relative;">
            
            <div style="left: 25px; height: 29px; margin-top: 30px; margin-left: 35px; position: absolute;">
                <img style="margin: 9px 0 0 5px;  float: left" title="ChronoZoom" src="Images/chronzoom-200px-white.png" onclick="resizeHeader()" />
                <img style="/*margin: 5px 0 0 14px; float: right*/" id="search_button" title="Search ChronoZoom" alt="Search ChronoZoom" src="Images/search_off.jpg"
                    onmouseup="onSearchClicked();" onmouseover="searchHighlight(true);"
                    onmouseout="searchHighlight(false);" />
                <img style="margin: 5px 0 0 14px" title="Take a guided tour" id="tours_index" alt="Take a guided tour" src="Images/tour_off.jpg"
                     onmouseover="tourButtonHighlight(true);" onmouseout="tourButtonHighlight(false);"
                    onmouseup="onTourClicked();" />
            </div>
            <div class="regimes_rects" style="right: 0px; position: absolute; top: 0px; width: 302px; height: 100px; ">
                <div id="human_rect" class="regime_rect" style="position: absolute; top: 1px; width: 17px; left: 284px;
                    height: 18px; background-color: rgba(212, 92, 70, 1.0); cursor: pointer;">
                </div>
                <div id="prehuman_rect" class="regime_rect" style="position: absolute; top: 20px; width: 104px; left: 197px;
                    height: 18px; background-color: rgba(237, 145, 50, 1.0); cursor: pointer;">
                </div>
                <div id="life_rect" class="regime_rect" style="position: absolute; top: 40px; width: 258px; left: 45px;
                    height: 18px; background-color: rgba(73, 150, 73, 1.0); cursor: pointer;">
                </div>
                <div id="earth_rect" class="regime_rect" style="position: absolute; top: 60px; width: 275px; left: 28px;
                    height: 18px; background-color: rgba(81, 127, 149, 1.0); cursor: pointer;">
                </div>
                <div id="cosmos_rect" class="regime_rect" style="position: absolute; top: 80px; width: 300px; left: 1px;
                    height: 18px; background-color: rgba(152, 108, 157, 1.0); cursor: pointer;" >
                </div>
                <div id="regime_navigator" style="position: absolute; top: 0px; left: 1px; width: 300px;
                    height: 100px; background-color: White; opacity: 0.3; pointer-events: none;">
                </div>
            </div>
            <!--<img alt="regimes_navigator" style="right: 0px; position: absolute; top: 0px" src="Images/regimes.png" />-->
            <div class="regimes_titles" style="top: 0px; position: absolute; right: 309px; font-size: 11.5pt;">
                <div style="position: relative; height: 20px;">
                    <div class="regimes_title" onclick="navigateToBookmark(humanityVisible);">
                        Humanity</div>
                </div>
                <div style="position: relative; height: 20px;">
                    <div class="regimes_title" onclick="navigateToBookmark(prehistoryVisible);">
                        Human&nbsp;Prehistory</div>
                </div>
                <div style="position: relative; height: 20px;">
                    <div class="regimes_title" onclick="navigateToBookmark(lifeVisible);">
                        Life</div>
                </div>
                <div style="position: relative; height: 20px;">
                    <div class="regimes_title" onclick="navigateToBookmark(earthVisible);">
                        Earth</div>
                </div>
                <div style="position: relative; height: 20px;">
                    <div class="regimes_title" onclick="navigateToBookmark(cosmosVisible);">
                        Cosmos</div>
                </div>
            </div>

            
            <div id="bc_navLeft"  onclick="breadCrumbNavLeft()" class="breadCrumbNavButton">&#171;</div> 
            <div id="breadCrumbsPanel" class="breadCrumbPanel unselectable" style="margin-top: 10px; max-width: 40%">
                <table id="breadCrumbsTable" class="breadCrumbTable">
                    <tr>
                    </tr>
                </table>
            </div>
            <div id="bc_navRight" onclick="breadCrumbNavRight()" class="breadCrumbNavButton">&#187;</div>
            

            <div id="tour_control" class="tour_control" style="display: none; top: 14px; position: relative;
                margin: auto">
                <img id="tour_prev" src="Images/tour_prev_off.jpg" alt="previous" onmouseout="toggleOffImage('tour_prev');"
                    onmouseover="toggleOnImage('tour_prev');" onclick="tourPrev();" />
                <img style="margin: 0 0 0 16px"
                    id="tour_playpause" src="Images/tour_pause_off.jpg" alt="play/pause" onmouseout="toggleOffImage('tour_playpause');"
                    onmouseover="toggleOnImage('tour_playpause');" onclick="tourPlayPause();" />
                <img
                    style="margin: 0 0 0 16px" id="tour_next" src="Images/tour_next_off.jpg" alt="next"
                    onmouseout="toggleOffImage('tour_next');" onmouseover="toggleOnImage('tour_next');"
                    onclick="tourNext();" />
                <img style="margin: 0 0 0 10px" id="tour_exit" src="Images/tour_exit_off.jpg"
                    alt="exit" onmouseout="toggleOffImage('tour_exit');" onmouseover="toggleOnImage('tour_exit');"
                    onclick="tourAbort();" />
            </div>
        </div>
        <div>

            <div style="display: inline-block; position: relative; top: 53px; left:420px; width: 30%;">
                <div style="height: 18px; margin-left: 30px; margin-top: 47px; top: 10px">
                    <span id="Span12" class="footerLeftText">Created by: 
        </span>
                    <a id="Span13" class="footerLeftTextMRC" href="http://research.microsoft.com/en-us/projects/chronozoom/default.aspx">
            <img id="Img1" src="Images/mrclogo-17x53.png" alt="Microsoft Research" />
        </a>
                    <a id="Span14" class="footerLeftTextUC" href="http://eps.berkeley.edu/">
            <img id="Img2" src="Images/berkeley-logo-17-86.png" alt="University of California Berkeley Department of Earth and Planetary Science" />
        </a>
                    <a id="Span15" class="footerLeftTextMSU" href="http://www.cs.msu.su/S">
            <img id="Img3" src="Images/MSU_logo-white17x74.png" alt="Moscow State University" />
        </a>
</div>
                </div>
                    <div class="footerLinks" style="margin-top: 15px; margin-left: 400px;">
     
                        <a id="Span9" class="footerText" href="BehindTheScenes.htm">Behind the Scenes
        </a>
                        <span id="Span1" class="pipeText">|
        </span>
                        <a id="Span4" class="footerText" href="TermsOfUse.htm">Terms of Use
        </a>
                        <span id="Span5" class="pipeText">|
        </span>
                        <a id="Span6" class="footerText" href="Privacy.htm">Privacy
        </a>
                        <span id="Span7" class="pipeText">|
        </span>
                        <a id="Span8" class="footerText" href="Trademark_Copyright.htm">Trademark
        </a>
                        <div class="loginButton footerText" data-win-control="FacebookWinJS.Login"  data-win-options="{appId: 169968023162356}" style="width: 50px"></div>
                    </div>
        
    
	<!--<div id="welcomeScreenIntroduction">
		<div id="welcomeScreenBack" class="fullScreenBlurred">
	
		    <div id="welcomeScreenOut" class="welcomeScreenOuterWindow" style="top: 150px">
				    <div class="innerIntroductionContent">

					    <div style="position:absolute; top:30px; left:20px; width:94%; height:50px;" class="topIntro">
						    <table cellpadding="0" cellspacing="0" style="width:100%;">
							    <tr>
							    <td>
								    <label>&nbsp;&nbsp;Introduction to ChronoZoom</label>
							    </td>

							    <td style="padding-right:10px; padding-top:3px" >
								    <img src="../Images/welcomeCloseButton.png"  onclick="hideWelcomeScreen()" />
							    </td>
							    </tr>
						    </table>
					    </div>

					

					    <div style="position:relative; top:120px; left:20px; display:table; height:385px; width:94%">
						
						    <table cellpadding="0" cellspacing="" style="height:385px;">
							    <tr>
								    <td style="width:640px; padding-left:70px">
									    <iframe style="text-align:center" id="welcomeVideo" class="youtube-player" type="text/html" width="640" height="385" src="http://www.youtube.com/embed/HjQxjVaMp-g" frameborder="0">
									    </iframe>
								    </td>

								    <td style="padding-left: 15px" >
									    <img src="../Images/welcomeButtonNext.png" />
								    </td>
							    </tr>
						    </table>

					    </div>

					    <div style="position:absolute; bottom:30px; left:20px; height:20px; display:table;">
					
						    <div style="display:table-cell; float: left">
  							    <input type="checkbox" id="welcomeScreenCheckbox" name="welcomeScreenCheckbox" onclick="checkboxWelcomeChanged()" /> 

							    <label for="welcomeScreenCheckbox" unselectable="on">Don't show again</label> 
						    </div>

						    <div id="navigationControls" style="display:table-cell; float: left">
							    <ul>
								    <li class="active" />
								    <li />
								    <li />
								    <li />
							    </ul>							
						    </div>

					    </div>
				    </div>
		    </div>
        </div>
	</div>-->

</body>
</html>
